import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Table, Popconfirm, Form, Checkbox, Popover} from 'antd';
import {conventEnumValueToString, formatAmount} from '../../utils';
import {TABLE, FIXED_COLUMN_WIDTH} from '../../constants';
import {claimUsedPartDealCategory} from '../../Enum';
import {formatMessage} from '../intl';
import PartSelectPanel from './PartSelectPanel';
import LocalizeInputNumber from '../../common/LocalizeInputNumber';
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
import styles from '../style.css';
const FormItem = Form.Item;

class MaterialTablePanel extends PureComponent {
    state = {
        showSelectPartPanel: false,
        usedPartId: ''
    }
    onDeletePart = usedPartId => {
        this.props.onDeletePart(usedPartId);
    };
    onAddWorkItemPart = usedPartId => {
        this.props.onAddWorkItemPart(usedPartId);
    };
    onCausedCheck = e => {
        this.props.onCausedCheck(e);
    };
    onDeleteAllParts = () => {
        this.props.onDeleteAllParts();
    };
    onMaterialQuantityChange = (value, usedPartId) => {
        this.props.onPartQuantityChange(usedPartId, value);
    };
    onSelectParts = value => {
        this.props.onSelectParts(this.state.usedPartId, value);
        this.setState({
            showSelectPartPanel: false
        });
    };
    onClickAddNewPartBtn = usedPartId => {
        this.setState({
            usedPartId,
            showSelectPartPanel: true
        });
    };
    onClosePartSelectPanel = () => {
        this.setState({
            showSelectPartPanel: false
        });
    };
    render() {
        const {data} = this.props;
        const columns = [
            {
                title: formatMessage({
                    id: 'materialTablePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.productCategoryCode} title={formatMessage({
                    id: 'materialTablePanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName',
                render: text => <span title={text}><Ellipsis length={20}>{text}</Ellipsis></span>
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                render: (text, record) => (
                    <Checkbox
                        checked={record.isCaused}
                        name="isCaused"
                        id={record.usedPartId}
                        value={record.isCaused}
                        onChange={this.onCausedCheck}>
                    </Checkbox>
                )
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.usedPartDealCategory',
                    defaultMessage: '旧件处理政策'
                }),
                dataIndex: 'usedPartDealCategory',
                render: text => conventEnumValueToString(claimUsedPartDealCategory, text)
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.usedPartBarCode',
                    defaultMessage: '旧件条码'
                }),
                dataIndex: 'usedPartBarCode'
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                render: (text, record) => {
                    const validate = (text === null || text === undefined) ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber
                                min={0}
                                id={record.usedPartId}
                                precision={2}
                                value={text} onBlur={this.onMaterialQuantityChange}/>
                        </FormItem>
                    );
                }
            },
            {
                title:
            data && data.length > 0 ? (
                <Popconfirm placement="topRight" title={formatMessage({
                    id: 'materialTablePanel.column.allDelete',
                    defaultMessage: '是否确认全部删除？'
                })} onConfirm={this.onDeleteAllParts} >
                    <a>{formatMessage({
                        id: 'materialTablePanel.column.empty',
                        defaultMessage: '清空'
                    })}</a>
                </Popconfirm>
            ) : (
                <a>
                    {formatMessage({
                        id: 'materialTablePanel.clear',
                        defaultMessage: '清空'
                    })}
                </a>
            ),
                dataIndex: 'usedPartId',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, r) => (
                    <div>
                        {/* {(this.props.page === 'approve' || this.props.page === 'adjust') && r.isWorkItem &&  */}
                        <a
                            className={styles.workItemA}
                            data-id={text}
                            onClick={() => this.onAddWorkItemPart(text)}>
                            {formatMessage({
                                id: 'btn.workItem',
                                defaultMessage: '新增工时'
                            })}
                        </a>
                        <a data-id={text} onClick={() => this.onDeletePart(text)}>
                            {formatMessage({
                                id: 'btn.delete',
                                defaultMessage: '删除'
                            })}
                        </a>
                    </div>
                )
            }
        ];
        if(!this.props.isMoneyVisible)
            columns.splice(6, 0,
                {
                    title: formatMessage({
                        id: 'materialTablePanel.price',
                        defaultMessage: '单价'
                    }),
                    dataIndex: 'price',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'materialTablePanel.mgmtRate',
                        defaultMessage: '管理费率'
                    }),
                    dataIndex: 'mgmtRate',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'materialTablePanel.mgmtFee',
                        defaultMessage: '管理费'
                    }),
                    dataIndex: 'mgmtFee',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'materialTablePanel.materialFee',
                        defaultMessage: '材料费合计'
                    }),
                    dataIndex: 'materialFee',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'materialTablePanel.totalFee',
                        defaultMessage: '费用合计'
                    }),
                    dataIndex: 'totalFee',
                    render: text => formatAmount(text)
                });
        return (
            <div>
                <Table
                    className="white-space-nowrap"
                    rowKey="usedPartId"
                    columns={columns}
                    pagination={false}
                    dataSource={data}
                    {...TABLE}/>
                {this.state.showSelectPartPanel && (
                    <PartSelectPanel
                        onCancel={this.onClosePartSelectPanel}
                        onSelect={this.onSelectParts}
                        brandId={this.props.brandId}
                        productCategoryCode={this.props.productCategoryCode}
                        repairDate={this.props.repairDate}
                        usedPartId={data.usedPartId}/>
                )}
            </div>
                
        );
    }
}

MaterialTablePanel.propTypes = {
    brandId: PropTypes.string,
    data: PropTypes.array,
    isMoneyVisible: PropTypes.bool,
    page: PropTypes.string,
    productCategoryCode: PropTypes.string,
    repairDate: PropTypes.string,
    onAddWorkItemPart: PropTypes.func,
    onCausedCheck: PropTypes.func,
    onDeleteAllParts: PropTypes.func,
    onDeletePart: PropTypes.func,
    onPartQuantityChange: PropTypes.func,
    onSelectParts: PropTypes.func,
};

export default MaterialTablePanel;
